<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MarketIndex Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="../../../common/common.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/dropdownlist/dropdownlist.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/tabmenu/tabmenu.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/scrollpanel/scrollpanel.css" type="text/css" rel="stylesheet"/>
    <link href="../../../ui/datagrid/datagrid.css" type="text/css" rel="stylesheet"/>
    <link href="../../../widgets/marketIndex/marketIndex.css" type="text/css" rel="stylesheet"/>
    <link href="../../../theme/default/style.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
    /*reset and common*/
    body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,button,textarea,p,th,td{margin:0;padding:0;}
    table{border-collapse:collapse;border-spacing:0;}
    img{border:0;}
    li{list-style:none;}
    em{font-style:normal;}
    html,body{font:normal 11px Verdana,Arial,Helvetica,sans-serif;background:#fff;color:#333;height:100%;}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;background:#fff;}
    input,button,textarea,select{*font-size:100%;}
    input{vertical-align:middle;}
    a{color:#333;text-decoration:none;}
    p{line-height:1.6;}
    .clearfix{zoom:1;} 
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
    h2,h3,h4,h5{font-weight:bold;}


    .sdk-watchlist-toolContainer{background:#f5f5f5;}
    .sdk-marketindex-logContainer{background:#f5f5f5;border-bottom:1px solid #ccc;}
    .sdk-marketindex-tool{padding:5px;width:150px;float: left}
    .sdk-marketindex-tool .get{width:250px;}
    .sdk-marketindex-logContainer{padding:5px}
    .sdk-marketindex-log{margin:5px;border:1px solid #ccc;width:400px; height:100px;overflow:auto;}
    </style>
</head>
<body>
    <div class="sdk-marketindex-demo">
        <div class="sdk-watchlist-toolContainer clearfix">
            <div class="sdk-marketindex-tool">
                <h3>Resize</h3>
                <div class="sdk-marketindex-tool sdk-marketindex-resize"></div>
            </div>
            <div class="sdk-marketindex-tool">
                <h3>ChangeRange</h3>
                <div class="sdk-marketindex-tool sdk-marketindex-range"></div>
            </div>
            <div class="sdk-marketindex-tool get">
                <h3>Get Interface</h3>
                <div class="sdk-marketindex-tool sdk-marketindex-get"></div>
            </div>   
        </div>
        <div class="sdk-marketindex-logContainer">
                <h3>Logs</h3>
                <div class="sdk-marketindex-log"></div>
            </div>
    	<div class="sdk-marketindex-container"></div>
    </div>
    <script type="text/javascript" src="../../../lib/jquery.js"></script>
    <script type="text/javascript" src="../../../lib/jquery.json.min.js"></script>
    <script type="text/javascript" src="../../../lib/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="../../../lib/migratory-jslib.js"></script>
    <script type="text/javascript" src="../../../lib/excanvas.min.js"></script>
	<script type="text/javascript" src="../../../common/common.js"></script>
	<script type="text/javascript" src="../../../core/common.js"></script>
	<script type="text/javascript" src="../../../core/permissionChecker.js"></script>
	<script type="text/javascript" src="../../../core/SDKDataManager.js"></script>
	<script type="text/javascript" src="../../../core/tickers.js"></script>
	<script type="text/javascript" src="../../../core/dataHandler.js"></script>
	<script type="text/javascript" src="../../../core/pull.js"></script>
	<script type="text/javascript" src="../../../core/push.js"></script>
	<script type="text/javascript" src="../../../core/subscriber.js"></script>    
    <script type="text/javascript" src="../../../formatter/qs_formatter_en_us.js"></script>
    <script type="text/javascript" src="../../../theme/default/style.js"></script>
    <script type="text/javascript" src="../../../language/en_us/qs_marketindex_en_us.js"></script>
    <script type="text/javascript" src="../../../ui/util/util.js"></script>
    <script type="text/javascript" src="../../../ui/tabmenu/tabmenu.js"></script>
    <script type="text/javascript" src="../../../ui/dropdownlist/dropdownlist.js"></script>
    <script type="text/javascript" src="../../../ui/scrollpanel/scrollpanel.js"></script>
    <script type="text/javascript" src="../../../ui/datagrid/datagrid.js"></script>

    <script type="text/javascript" src="../../../widgets/minichart/minichart.canvas.js"></script>
    <script type="text/javascript" src="../../../widgets/chart/chartUtil.js"></script>
    <script type="text/javascript" src="../../../widgets/chart/chartDataManager.js"></script>
    <script type="text/javascript" src="../../../widgets/minichart/minichart.js"></script>
    <script type="text/javascript" src="../../../widgets/marketIndex/marketIndex.js"></script>
    <script type="text/javascript">
        var marketIndexWidget=null;
        //callback
        var logContainer=$(".sdk-marketindex-log");
        logContainer.bind("dblclick",function(e){
            $(this).html("");
        });
        var log =function(title,json,isJosn){
            var str="";
            if(isJosn){
                for(var key in json){
                    str+=key+":"+json[key]+"<br/>";
                }
            }else{
                str=json;
            }
            logContainer.prepend("<h4>"+title+"</h4>"+str);
        }
        //resize
        var resizeContainer=$(".sdk-marketindex-resize");
        new Util.DropDownList(resizeContainer,function(t,v){
            if(v=="default"){
                marketIndexWidget.changeOutSize(600,400);
            }else if(v=="wrap"){
                marketIndexWidget.changeOutSize(1000,500);
            }else if(v=="instance"){
                 marketIndexWidget.changeOutSize(600,300);
            }
        },[{
            txt:"600*400",
            val:"default"
        },{
            txt:"600*300",
            val:"instance"
        },{
            txt:"1000*500",
            val:"wrap"
        }],{
            width: 100,
            actionAtInit:false
        });
        //resize
        var resizeContainer=$(".sdk-marketindex-range");
        new Util.DropDownList(resizeContainer,function(t,v){
            marketIndexWidget.changeChartRange(v);
        },[{txt: '1Day',val: '1d' }, 
            {txt: '5Days',val: '5d' },
            {txt: '1Month',val: '1m'}, 
            {txt: '3Months',val: '3m'}, 
            {txt: '6Months',val: '6m'}, 
            {txt: '1Year ',val: '1y'}, 
            {txt: '2Years',val: '2y'}
        ],{
            width: 100,
            actionAtInit:false
        });
        //get interface
        var resizeContainer=$(".sdk-marketindex-get");
        new Util.DropDownList(resizeContainer,function(t,v){
            var str=marketIndexWidget[v]();
            log(t,str,true);
        },[{txt: 'getMenuData()',val: 'getMenuData' }, 
            {txt: 'getChartRangeData()',val: 'getChartRangeData' },
            {txt: 'saveConfig()',val: 'saveConfig'}
        ],{
            width: 200,
            actionAtInit:false
        });
        $(document.body).ready(function(){
            /*#############Demo Code###########################*/
            //init QSAPI
            QSAPI.init('DISN');
            //authentication
            QSAPI.Authentication.login("3385076F54485060427403D4CB3EDBF4B51A60E75510834F099A0A9AB1DE930BBFEFB3E1FB0737DD7F2D0D340124D21449EDCE45B1AD19162FB476BE0EAF47CB","62AE252A46399A992E5E581ACE458353C76F388C0B72B2A22E6A4D5077204D8E732AD3693025559AFA9FED3A3EF09354EA0DAA3F6EEE6158D98820232F345C1C",{
                onFailure:function(result){
					document.write("login failed.");
                },
                onSuccess:function(result){
                	QSAPI.DataManager.connectToPull("http://qsstage.morningstar.com/pullservice/pull/getPullQuote.jsp",10000,{
                		onSuccess:function(){
                			marketIndexWidget= new QSAPI.Widget.MarketIndex($(".sdk-marketindex-container"),{
                                initwidth:600,
                                initheight:400,
                                menuList:["northamerican"]
                            },{
                                onLoad:function(pare){
                                    log("onLoad",pare,true);
                                },
                                onHeightChange:function(pare){
                                    log("onHeightChange",pare,true);
                                },
                                onStateChange:function(configName,value){
                                    log("onStateChange",configName+"="+value,false);
                                }
                            },"marketIndex_0");
                			marketIndexWidget.init();
                    	}
                	});
                }
            });
        });
    </script>
</body>
</html>



